/* scroll */
.tyani-scroll {
  @include transition-default();

  &-enter-from,
  &-leave-to {
    opacity: 0;
  }

  &-enter-from {
    transform: translateY(-15px);
  }

  &-leave-to {
    transform: translateY(15px);
  }

  /* scroll-reverse */
  &-reverse {
    @include transition-default();

    &-enter-from,
    &-leave-to {
      opacity: 0;
    }

    &-enter-from {
      transform: translateY(15px);
    }

    &-leave-to {
      transform: translateY(-15px);
    }
  }

  /* scroll-x */
  &-x {
    @include transition-default();

    &-enter-from,
    &-leave-to {
      opacity: 0;
    }

    &-enter-from {
      transform: translateX(-15px);
    }

    &-leave-to {
      transform: translateX(15px);
    }

    /* scroll-x-reverse */
    &-reverse {
      @include transition-default();

      &-enter-from,
      &-leave-to {
        opacity: 0;
      }

      &-enter-from {
        transform: translateX(15px);
      }

      &-leave-to {
        transform: translateX(-15px);
      }
    }
  }
}
